<script setup lang="ts">
/**
 * @desc UserTaskOperation
 * @author DragonTeam <https://www.bpmport.com>
 * @since 2024/11/7 11:12
 */

import { Command } from 'lucide-vue-next'
import { type PropType, computed, onMounted, ref } from 'vue'
import { getAuthPointVos } from '@/api'
import type { BaseNode } from '@/types'

defineOptions({ name: 'UserTaskOperation' })

const $props = defineProps({
  node: {
    type: Object as PropType<BaseNode>,
    required: true,
  },
})
const doEmit = defineEmits(['update:node'])
const vModelNode = computed<BaseNode>({
  get: () => $props.node,
  set: val => doEmit('update:node', val),
})

const authPointOptions = ref<any[]>([])

const authPoints = computed<string[]>({
  get: () => (vModelNode.value.businessData.authPoints as any[])?.map(i => i.id) || [],
  set: (selectedIds) => {
    const selectedPoints = JSON.parse(
      JSON.stringify(authPointOptions.value.filter(i => selectedIds.includes(i.id))),
    )
    selectedPoints.forEach(i => (i.selected = 1))

    vModelNode.value.businessData.authPoints = selectedPoints
  },
})

onMounted(async () => {
  const { data } = await getAuthPointVos()
  authPointOptions.value = (data || [])
})
</script>

<template>
  <a-collapse-item key="UserTaskOperation">
    <template #header>
      <Command :size="16" />
      操作项
    </template>

    <EditItem label="操作">
      <a-checkbox-group v-model="authPoints">
        <a-space direction="horizontal" wrap>
          <a-checkbox v-for="i in authPointOptions" :key="i.id" :value="i.id">
            {{
              i.name
            }}
          </a-checkbox>
        </a-space>
      </a-checkbox-group>
    </EditItem>
  </a-collapse-item>
</template>
